<template>
	<view>
		
		<block v-if="banner.length > 0">
			<swiper :indicator-dots="true"
				:autoplay="true"
				interval="3000"
				duration="150"
				class="tui-banner-swiper"
				:circular="true"
				@change="handlerSlideChange"
			>
				<block v-for="(data,index) in banner" :key="index">
					<swiper-item class="tui-banner-item" :data-link="data.link" :data-jumpappid="data.jumpAppid"
					>
						<image
							:src="data.image"
							:class="'tui-slide-image ' + (current == index || (current == undefined && index == 0) ? '' : 'tui-banner-scale')"
							mode="aspectFill"
							:lazy-load="true"
						/>
					</swiper-item>
				</block>
			</swiper>
		</block>
		
		<block v-if="banner.length == 0">
			<!-- #ifdef MP-WEIXIN -->
			<ad :unit-id="setAD.banner" ad-intervals="30" v-if="setAD.banner"></ad>
			<!-- #endif -->
		</block>
		
		<uni-notice-bar show-icon color="#2979FF" background-color="#EAF2FF"
		scrollable="true" single="true" :text="noticeText" 
		showIcon="true" :speed="30">
		</uni-notice-bar>
		
		<view class="href">
			<view class="box">
				<view class="cu-bar bg-white">
					<view class="action">
						<text class="cuIcon-titles text-blue"></text>
						<text class="">输入视频或图集链接</text>
					</view>
					<view class="text-blue" style="margin-right: 20px;" @click="getClipboardData">粘贴链接</view>
				</view>
			</view>
			
			<view class="input">
				<uni-forms>
					<uni-easyinput type="textarea" v-model="videoSrc" placeholder="输入视频或图集链接" />
				</uni-forms>
			</view>
			
			<view class="padding flex flex-direction">
				<button class="cu-btn bg-blue margin-tb-sm lg" @click="parseClick">去水印解析</button>
			</view>

		</view>
		
		<view class="menu">
			<view class="cu-list grid col-2" >
				<view class="cu-item" @click="courseClick">
					<view class="cuIcon-same text-blue">
						
					</view>
					<text>去水印教程</text>
				</view>
				<view class="cu-item" @click="jumpClick">
					<view class="cuIcon-pulldown text-blue">
						
					</view>
					<text>无水印图集下载</text>
				</view>
				
			</view>
			<view class="cu-list grid col-2" style="margin-top: -10rpx;">
				
				<view class="cu-item" @click="jumpClick">
					<view class="cuIcon-video text-blue">
						
					</view>
					<text>无水印视频下载</text>
				</view>
				<view class="cu-item">
					<view class="cuIcon-share text-blue">
						
					</view>
					<text>分享给朋友</text>
					<button class="sharebtn" open-type="share">
						分享给朋友
					</button>
				</view>
			</view>
		</view>
		
		<!-- #ifdef MP-WEIXIN -->
		<ad :unit-id="setAD.banner" ad-intervals="30" v-if="setAD.banner" ></ad>
		<!-- #endif -->
		
		<view class="bottom-guo">
			<view class="cu-bar bg-white">
				<view class="action">
					<text class="cuIcon-titles text-blue"></text>
					<text class="text-lg">再次使用：发现小程序-搜索-"漫漫去水印"</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	
	let setinad = null;
	
	const constant = require('../../utils/constants.js');
	
	const http = require('../../utils/http.js');
	
	const util = require('../../utils/util.js');
	
	export default {
		data() {
			return {
				setAD: null,
				banner: [{
					image:'https://t4.market.xiaomi.com/thumbnail/png/w480q70/ThemeMarket/057fcd4ad7e1243b62db66b0ae219ad3fa9257f3b'
				}],
				current: 0,
				mode:'dot',
				noticeText:'漫漫去水印免费且不限次数使用',
				videoSrc:'',
			}
		},
		onShareAppMessage(res) {
			let that = this;
			return {
				title: '抖音、快手短视频一键去水印，去水印就是这样简单',
				path: '/pages/index/index',
				//imageUrl:'../../static/images/yaoqing.jpg'
			}
		},
		onShareTimeline: function () {
			let that = this;
		    return {
		        title: '抖音、快手短视频一键去水印，去水印就是这样简单',
				path: '/pages/index/index',
				//imageUrl:'../../static/images/yaoqing.jpg'
		    }
		},
		onLoad(options) {
			this.loadIndexData();
			let that = this;
			util.getAD(that, function () {
				that.setInterstitialAd(); //加载插屏广告
			});
		},
		onHide(){
			clearInterval(setinad);
		},
		methods: {
			// 获取小程序插屏广告
			setInterstitialAd: function () {
			    var that = this;
			    if (that.setAD.interstitialid && uni.createInterstitialAd) {
			        let interstitialAd = uni.createInterstitialAd({
			            adUnitId: that.setAD.interstitialid
			        }); // 监听插屏错误事件
			
			        interstitialAd.onError((err) => {
			            console.error(err);
			        }); // 显示广告
			
					  if (interstitialAd) {
						if (that.setAD.switch_inad == 'yes') {
						  setinad = setInterval(() => {
							interstitialAd.show().catch(err => {
							  console.error(err);
							});
						  }, 2000);
						} else {
						  setTimeout(() => {
							interstitialAd.show().catch(err => {
							  console.error(err);
							});
						  }, 6000);
						}
					  }
			    }
			},
			getClipboardData:function(){
				let that = this;
				uni.getClipboardData({
					success: function (res) {
						console.log(res.data);
						uni.hideToast();
						that.videoSrc = res.data;
					},fail(err) {
						console.log(err)
					}
				});
			},
			loadIndexData:function(e){
				let that = this;
				var params = {
				    url: '/index/data',
				    method: 'get',
				    data: {},
				    callBack: function (res) {
				        if(res.code ==  200){
							that.wxAdvert = res.data.wxAdvert;
							that.banner = res.data.bannerList;
							if(res.data.notice){
								that.noticeText = res.data.notice.title;
							}
							that.setInterstitialAd();
						}
				    }
				};
				http.request(params);
			},
			handlerSlideChange(e) {
				this.current = e.detail.current;
			},
			parseClick:function(e){
				
				if(this.videoSrc == '' || this.videoSrc == null){
					uni.showToast({
						title:'请输入解析链接',
						icon:'none'
					})
					return;
				}
				let videoSrc = this.videoSrc;
				
				//设置缓存
				uni.setStorageSync(constant.CACHE_PARSE_URL, videoSrc);
				
				uni.navigateTo({
					url:'../parse/parse?videoSrc='+videoSrc
				})
			},
			jumpClick:function(e){
				let videoSrc = this.videoSrc;
				
				uni.navigateTo({
					url:'../parse/parse?videoSrc='+videoSrc
				})
			},
			courseClick:function(){
				uni.navigateTo({
					url:'../course/course'
				})
			}
		}
	}
</script>

<style>
	page{
	}
	.href{
		background-color: #FFFFFF;
		margin-top: -10px;
	}
	.input{
		width: 90%;
		margin-left: 15px;
	}
	.menu{
		margin-top: 20rpx;
		background-color: #FFFFFF;
	}
	.tui-banner-item {
	    /* padding: 0 16rpx; */
	    box-sizing: border-box;
	}
	.tui-slide-image {
	    width: 100%;
	    height: 100%;
	    display: block;
	    /* border-radius: 30rpx; */
	    transition: all 0.1s linear;
	    box-shadow: 3rpx 3rpx 10rpx rgba(0, 0, 0, 0.2);
	}
	
	.tui-banner-scale {
	    /* transform: scaleY(0.9); */
	    transform-origin: center center;
	}
	
	.bottom-guo{
		margin-top: 20rpx;
	}
	
	.sharebtn{
	    width: 100%;
	    height: 150rpx;
	    opacity:0;
	    position: absolute;
	}
</style>
